<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="产品总数"
        :value="stats.productCount"
        icon="Box"
        color="#1890ff"
        :trend="stats.productTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="库存总价值"
        :value="stats.totalValue"
        prefix="¥"
        icon="Coin"
        color="#52c41a"
        :trend="stats.valueTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="预警产品数"
        :value="stats.warningCount"
        icon="Warning"
        color="#fa8c16"
        :trend="stats.warningTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="缺货产品数"
        :value="stats.outOfStockCount"
        icon="DocumentDelete"
        color="#ff4d4f"
        :trend="stats.outOfStockTrend"
        class="stat-card-hover"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import StatCard from '@/components/StatCard.vue'

interface InventoryStats {
  productCount: number
  totalValue: number
  warningCount: number
  outOfStockCount: number
  productTrend: number
  valueTrend: number
  warningTrend: number
  outOfStockTrend: number
}

const props = defineProps<{
  stats: InventoryStats
}>()
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}

/* 统计卡片悬停效果 */
.stat-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.stat-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.stat-card-hover:active {
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-row {
    margin-bottom: 12px;
  }
  
  .stat-card-hover {
    margin-bottom: 12px;
  }
}
</style>